<template>
  <div id="app" ref="app">
    <div class="show-div" ref="showDiv" :style="{ height: show_div_height + 'px' }">
      <router-view/>
    </div>
    <div  ref="tabBar">
      <van-tabbar route v-model="active" :fixed="true" :placeholder="true">
      <van-tabbar-item to="/">
        <span>功能</span>
        <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? tabs[0].icon.active : tabs[0].icon.normal"
        >
      </van-tabbar-item>
      <van-tabbar-item to="/file">
        <span>文件</span>
        <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? tabs[1].icon.active : tabs[1].icon.normal"
        >
      </van-tabbar-item>
      <van-tabbar-item to="/info">
        <span>信息</span>
        <img
            slot="icon"
            slot-scope="props"
            :src="props.active ? tabs[2].icon.active : tabs[2].icon.normal"
        >
      </van-tabbar-item>
    </van-tabbar>
    </div>
    
  </div>
</template>
<script>

export default {
  mounted() {
    // const  tabBarHeight  =  this.$refs.tabBar.$el.offsetHeight;
    // this.$refs.showDiv.style.height  =  `calc(100vh  -  ${tabBarHeight}px)`

    // 监听main元素的高度变化
    this.$nextTick(()=>{
      this.recalculateShowDivHeight()
      window.addEventListener('resize',this.recalculateShowDivHeight)
    })
  },
  destroyed(){
    window.removeEventListener('resize',this.recalculateShowDivHeight)
  },
  data(){
    return {
      show_div_height: 0,
      active: 0,
      tabs: [
        {
          name: 'gongneng',
          isActive: true,
          icon: {
            active: require("./assets/img/gongneng_act.png"),
            normal: require("./assets/img/gongneng.png")
          }
        },
        {
          name: 'wenjian',
          isActive: false,
          icon: {
            active: require("./assets/img/wenjian_act.png"),
            normal: require("./assets/img/wenjian.png")
          }
        },
        {
          name: 'xinxi',
          isActive: false,
          icon: {
            active: require("./assets/img/xinxi_act.png"),
            normal: require("./assets/img/xinxi.png")
          }
        }
      ]
    }
  },
  methods: {
    recalculateShowDivHeight(){
      const appHeight = this.$refs.app.clientHeight
      // const tabBarHeight=this.$refs.app.querySelector('van-tabbar').clientHeight
      const tabBarHeight=this.$refs.tabBar.clientHeight
      this.show_div_height = appHeight-tabBarHeight
      console.log(appHeight,tabBarHeight,this.show_div_height)
    },
    tabChange(){
      console.log(this.active)

      switch (this.active){
        case 0:{
          this.$router.push({path:'/'})
          break
        }
        case 1:{
          this.$router.push({path:'/file'})
          break
        }
        case 2:{
          this.$router.push({path:'/info'})
          break
        }
      }
    }
  }
}
</script>
<style>
#app{
  display: flex;
  flex-direction: column;
  height: 100vh;
}
.show-div{
  overflow: auto;
  height: 100vh;

  /* background: greenyellow; */
}
</style>
